<template>
  <div id="app" >
    <!-- 这里的属性不加:冒号 -->
    <ul 
      style="overflow-y:scroll;" 
      v-infinite-scroll="load" 
      infinite-scroll-disabled="disabled"
      infinite-scroll-delay="delay"
      infinite-scroll-distance="distance"
      infinite-scroll-immediate="immediate"
      class="box"
    >
      <li v-for="c in count" :key="c">{{c}}</li>
    </ul>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return {
      count:0,
      disabled:false,
      delay:200,
      distance:30,
      immediate:true,
    }
  },
  methods:{
    load(){
      this.count += 2;
    }
  }
}
</script>

<style lang="scss">
.box{
  width:400px;
  height:300px;
  border: 1px solid green;
}
</style>
